
L.CheckboxElement = L.Element.extend({

  initialize: function (attrs, options) {
    L.Element.prototype.initialize.call(this, attrs, options);
    var correctness = attrs.correctness;
    if(correctness == "good"){
      var good = "";
      good += "M256,50C142.229,50,50,142.229,50,256s92.229,206,206,206s206-92.229,206-206S369.771,50,256,50z";
      good += "M220.953,366.959l-97.326-97.352l41.44-41.448l55.884,55.899l129.018-129.018l41.459,41.431L220.953,366.959z";
      good += "M220.953,366.959l-97.326-97.352l41.44-41.448l55.884,55.899l129.018-129.018l41.459,41.431L220.953,366.959z";
      this._icon = good;
      this._color = "#0ff801";
    }else{
      var bad = "";
      bad += "M256,50C142.229,50,50,142.229,50,256s92.229,206,206,206s206-92.229,206-206S369.771,50,256,50z"
      bad += "M334.124,378.545l-77.122-77.117l-77.123,77.127l-41.425-41.449l77.106-77.117l-77.115-77.11l41.448-41.424l77.103,77.092"
      bad += "l77.09-77.102l41.459,41.432l-77.104,77.108l77.113,77.102L334.124,378.545z"
      bad += "M334.124,378.545l-77.122-77.117l-77.123,77.127l-41.425-41.449l77.106-77.117l-77.115-77.11l41.448-41.424l77.103,77.092"
      bad += "l77.09-77.102l41.459,41.432l-77.104,77.108l77.113,77.102L334.124,378.545z"
      this._icon = bad;
      this._color = "#f00";
    }
  },

  attr: function(){
   
    if(!this._path){
      var args = Array.prototype.slice.call(arguments);
      this.deserialize(args[0]);
      console.log("[warning]attr() aun no esta implementada para ser llamada antes de ser agrega a un canvas, argumento fue deserializado")
      return;
    }

    //this._rectangle_drawing.attr.apply(this._rectangle_drawing, arguments);
    //this._rectangle_drawing.data('elementId', this._attrs.id);

    var attrs = this._path.attr();
    attrs.id = this._attrs.id;
    attrs.type = this._attrs.type;
    attrs.correctness = this._attrs.correctness;

    this._attrs = attrs;

    this._path.attr.apply(this._path, arguments);
    this._path.transform("...t" + (attrs.tx) + "," + (attrs.ty) + "S0.11");
    this._path.data('elementId', this._attrs.id);

    if(this._fireEvents){
      this.fire('change', this);
    }

    return this;
  },

  noEventsAttr: function(){
    this._fireEvents = false;
    var resp = this.attr.apply(this, arguments);
    this._fireEvents = true;
    return this;
  },

  draw: function() {
    var tx = this._attrs.tx;
    var ty = this._attrs.ty;

    //var raphael = this._canvas.getRaphael();
    //this._rectangle_drawing = raphael.rect().attr({x:x, y:y, width:46, height:46,fill: "#bb7",stroke: "#fff"});
    //this._rectangle_drawing.data('elementId', this._attrs.id);
    //alert("x:y->"+x+":"+y)

    this._path = this._canvas.getRaphael().path(this._icon)
                  .attr({fill: this._color,stroke: "#000", "stroke-width":4})
                  .transform("t" + tx + "," + ty + "s0.11");

    //this._checkbox_drawing = raphael.path(checkbox_icon).attr({"fill": "#000",stroke: "#fff"}).transform("t" + (x + 9) + "," + (y + 7) + "s2");

    return;
  },

  erase: function() {
    //if(this._rectangle_drawing) this._rectangle_drawing.remove();
    if(this._path) this._path.remove();
  },

  scale: function(scale) {
    return;
    //no se guarda la propiedad escalada
    var strokeWidth = this._attrs["stroke-width"]*scale;
    this._element.attr("stroke-width", strokeWidth);
  },

  getRaphaelElement: function() {
    if(this._border) return [this._path, this._border];
    return [this._path];
  },

  bindEvents: function() {},

  unbindEvents: function(){},


  intersectWithBox: function(box){
    var elbox = this._path.getBBox();
    var inter = Raphael.isBBoxIntersect(elbox, box);
    return inter;
  },

  drawBorder: function(){
    this.removeBorder();
    this._border = this._path.glow({color:"#333"});
  },

  removeBorder: function(){
    if(this._border){
      this._border.remove();
      this._border = null;
    }
  },

  move: function(dx, dy){
    alert("move!");

    //this._rectangle_drawing.transform("...t" + dx + "," + dy);
    this._path.transform("...t" + (dx - 10) + "," + (dy - 10));

    if(this._fireEvents){
      this.fire('change', this);
    }
  },
    
  rotable: function(){
    return false;
  },

  scalable: function(){
    return false;
  },

  svg_path_to_string: function (path) {
    var str = "";
    for (var i = 0, n = path.length; i < n; i++) {
      var point = path[i];
      str += point[0] + parseInt(point[1]) + "," + parseInt(point[2]);
    }
    return str;
  },
  // Convert a string into an SVG path. This reverses the above code.
  string_to_svg_path: function (str) {
    var path = [];
    var tokens = str.split("L");
    
    if (tokens.length > 0) {
      var token = tokens[0].replace("M", "");
      var points = token.split(",");
      path.push(["M", parseInt(points[0]), parseInt(points[1])]);
      
      for (var i = 1, n = tokens.length; i < n; i++) {
        token = tokens[i];
        points = token.split(",");
        path.push(["L", parseInt(points[0]), parseInt(points[1])]);
      }
    }
    
    return path;
  },

  _onHoverIn: function(obj){
    obj.attr({
      fill:"#bbffbb"
    })
  },

  _onHoverOut: function(obj){
    obj.attr({
      fill:"#bbbbbb"
    })
  }


});

